<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="reset.css">
    <style>
        .pagination {
            margin-top: 50px;
            margin-left: 25px
        }

        .pagination li {
            display: inline-block
        }

        .pagination .ToPage {
            width: 50px;
            border: 1px solid #eee
        }
    </style>
</head>

<body>

    <div id="app">
        <div>
            <ul>
                <li v-for="item in newList" :key="item.id">{{item.id}}</li>
            </ul>
        </div>
        <ul class="pagination">
            <li @click="prepage">上一页</li>
            <li>跳到-第
                <input class="ToPage" type="number" v-model="ToPage">页
                <button @click="sureTopage">确定</button>
            </li>
            <li @click="nextpage">下一页</li>
            <li>第{{whichPage}}页/共{{allpage}}页</li>
        </ul>
    </div>

    <script src="vue.js"></script>
    <script src="axios.min.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'test',
                ToPage: null,
                whichPage: 1,
                pageindex: 5,
                allpage: 10,
                oldlist: [],
                newList: [],
                mix: 0,
                max: 3
            },
            mounted() {
                axios.get('page.json')
                    .then((result) => {
                        // vm.list = result.data.slice(5,10)
                        vm.oldlist = result.data
                        vm.newList = vm.oldlist.slice(vm.mix, vm.max) //slice(start,end) //规定从何处开始选取。。规定从何处结束选取,该参数是数组片断结束处的数组下标
                        var pagesize = (vm.oldlist.length) % (vm.max - vm.mix)
                        if (pagesize === 0) {
                            vm.allpage = Math.floor((vm.oldlist.length) / (vm.max - vm.mix))
                        } else {
                            vm.allpage = Math.floor((vm.oldlist.length) / (vm.max - vm.mix)) + 1
                        }
                        // console.log(pagesize)
                    }).catch((err) => {

                    })
            },
            methods: {
                prepage: () => { //上一页
                    if (vm.whichPage === 1) {
                        alert("这是第一页，前面没啦");
                        return;
                    } else {
                        vm.whichPage--;
                        vm.newList = vm.oldlist.slice(vm.max * (vm.whichPage - 1), vm.max * (vm.whichPage)) //第一页 
                        vm.ToPage = null
                    }
                },
                sureTopage: () => { //跳页
                    if (vm.ToPage === null) {
                        alert("没输入页数,无法跳转");
                        return;
                    } else if (vm.ToPage > vm.allpage) {
                        alert("输入的数值大于总页数");
                        return;
                    } else {
                        vm.whichPage = vm.ToPage //whichpage 第几页 topage 调转到
                        vm.newList = vm.oldlist.slice(vm.max * (vm.ToPage - 1), (vm.ToPage) * (vm.max)) //第一页 
                    }

                },
                nextpage: () => {//下一页
                    var which = parseInt(vm.whichPage)
                    var all = parseInt(vm.allpage)
                    if (which === all) {
                        alert("这是最后一页，后面没啦");
                        return;
                    } else {
                        vm.whichPage++;
                        vm.newList = vm.oldlist.slice(vm.max * (vm.whichPage - 1), vm.max * (vm.whichPage)) //第一页 
                        vm.ToPage = null
                    }
                }
            }
        })
    </script>
</body>

</html>